import React from 'react';
import { NavBar, Button, Space } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './CampusCardUnbind.module.css';

function CampusCardUnbind() {
  const navigate = useNavigate();

  // 添加处理"暂不绑定"的函数
  const handleSkip = () => {
    localStorage.setItem('campusCardBound', 'false');
    navigate('/layout/home');
  };

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate('/layout/home')} className={styles.navBar}>校园卡</NavBar>
      
      <div className={styles.content}>
        <div className={styles.cardImage}>
          <img src="/xt.png" alt="校园卡" />
        </div>
        
        <div className={styles.message}>
          <h3>您尚未绑定校园卡</h3>
          <p>绑定后可查询余额、消费记录和进行充值等操作</p>
        </div>
        
        <Space direction='vertical' style={{ width: '100%' }}>
          <Button 
            color='primary' 
            block 
            size='large' 
            onClick={() => navigate('/campus-card-bind')}
            className={styles.bindBtn}
          >
            立即绑定
          </Button>
          
          <Button 
            fill='outline' 
            block 
            size='large' 
            onClick={handleSkip}
          >
            暂不绑定
          </Button>
        </Space>
      </div>
    </div>
  );
}

export default CampusCardUnbind;